class MySwiper{
    constructor(container,imgArr){
        this.containerEle = $(container);
        // console.log(this.containerEle);
        this.w = this.containerEle.width();
        this.h = this.containerEle.height();
        this.imgArr = imgArr;
        this.index = 1;
        this.timer;
        this.createImg();
        this.autoPlay();
        this.playOrStop();
        this. nextOrPre();
    }
    
    createImg(){
        let showContainer = $("<div></div>",{
            style:`width:${this.w*(this.imgArr.length+2)}px;height:${this.h}px;position:absolute;left:-${this.w}px`
        })
        let firstImg = this.imgArr[0];
        let lastImg = this.imgArr[this.imgArr.length-1];
        this.imgArr = [lastImg,...this.imgArr,firstImg];
        console.log(this.imgArr)
        this.showContainer = showContainer;
        this.imgArr.forEach((item,key)=>{
            let img = $("<img/>",{
                src:item,
                width:this.w,
                height:this.h,
            })
            showContainer.append(img);
        })
        this.containerEle.append(showContainer);
    }
    autoPlay(){
       this.timer =  setInterval(()=>{
            this.showContainer.animate({left:-this.w*(this.index+1)},()=>{
                // console.log("运动完成");
                this.index++;
                console.log("运动完成",this.index,this.imgArr.length-2);
                if(this.index==(this.imgArr.length-1)){
                   
                    this.showContainer.css("left",`-${this.w}px`);
                    this.index = 1;
                }
            });
        },2000);

    }
    playOrStop(){
        this.containerEle.mouseenter(()=>{
            clearInterval(this.timer);
            console.log("stop");
        })
        this.containerEle.mouseleave(()=>{
            this.autoPlay();
            console.log("play");
        })
    }

    nextOrPre(){
        this.createPreAndNextEle();
        this.prevAndNextEle.find("span").eq(0).click(()=>{
            this.showContainer.animate({left:-this.w*(this.index-1)},()=>{
                this.index--;
                console.log("运动完成",this.index,this.imgArr.length-2);
                if(this.index==0){
                   
                    this.showContainer.css("left",`-${this.w*(this.imgArr.length-2)}px`);
                    this.index = this.imgArr.length-2;
                }
            });
        })


        this.prevAndNextEle.find("span").eq(1).click(()=>{
            this.showContainer.animate({left:-this.w*(this.index+1)},()=>{
                this.index++;
                console.log("运动完成",this.index,this.imgArr.length-2);
                if(this.index==(this.imgArr.length-1)){
                   
                    this.showContainer.css("left",`-${this.w}px`);
                    this.index = 1;
                }
            });
        })
    }

    createPreAndNextEle(){
        let prevAndNextEle = $("<div></div>",{
            style:"width:100%;height:50px;position:absolute;top:40%;font-size:30px",
        });
        prevAndNextEle.html("<span style='float:left;'><</span><span style='float:right';>></span>");
        this.prevAndNextEle = prevAndNextEle;
        this.containerEle.append(prevAndNextEle)
    }
}